<!doctype html><html><head><title>-uu-display: table</title>
<style>
@import url(../../README.css);
html.ifie6 :unknown { /* force reload in ie6 */ }

html,body { color: black; }

.cell1, .disptblcell1 {
  width: 20%;
  background-color: #FFCC66;
}
.cell2, .disptblcell2 {
  width: 29%;
  background-color: #CC6633;
}
.cell3, .disptblcell3 {
  width: 30%;
  background-color: #FF9966;
}

.disptbl { display: table; -uu-display: table; }
.disptblcell1 { display: table-cell; -uu-display: table-cell; }
.disptblcell2 { display: table-cell; -uu-display: table-cell; }
.disptblcell3 { display: table-cell; -uu-display: table-cell; }

.top { vertical-align: top }
.middle { vertical-align: middle }
.bottom { vertical-align: bottom }
.left { text-align: left }
.center { text-align: center }
.right { text-align: right }
ul { color: gray }
</style>
<!--
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuResize.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS+.js"></script>
 -->
<script>
window.UUMETA_DEBUG = 1;
</script>
<script src="../../uuAltCSS.js"></script>
<script>
/* for debug
function dump() {
  var ruleset = uuAltCSS.getRuleset();
  uuQuery.id("dumpruleset").innerHTML += ruleset.join("<br />");
}
setTimeout(dump, 2000);
 */
</script>

</head><body><div id="dumpruleset"></div> <!-- for debug -->
<input type="button" value="revalidate" onclick="uuAltCSS()" />
<h1>-uu-display: table</h1>

<table class="tbl">
  <tbody>
  <tr>
    <td class="cell1">navigation</td>
    <td class="cell2">content</td>
    <td class="cell3">sidebar</td>
  </tr>
  </tbody>
</table>

<hr />

<div class="disptbl">
  <div class="disptblcell1 top left">navigation<span>|span|</span><p>|p|</p></div>
  <div class="disptblcell2 middle center">content<span>|span|</span><p>|p|</p></div>
  <div class="disptblcell3 bottom right">sidebar<span>|span|</span><p>|p|</p></div>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>

<hr />

<ul class="disptbl" style="margin: 0; padding: 0">
  <li class="disptblcell1 top left">navigation<span>|span|</span><p>|p|</p></li>
  <li class="disptblcell2 middle center">content<span>|span|</span><p>|p|</p></li>
  <li class="disptblcell3 bottom right">sidebar<span>|span|</span><p>|p|</p></li>
</ul>

<pre class="eg">
    &lt;style&gt;
    .cell1, .disptblcell1 {
      width: 20%;
      background-color: #FFCC66;
    }
    .cell2, .disptblcell2 {
      width: 29%;
      background-color: #CC6633;
    }
    .cell3, .disptblcell3 {
      width: 30%;
      background-color: #FF9966;
    }

    .disptbl { display: table; -uu-display: table; }
    .disptblcell1 { display: table-cell; -uu-display: table-cell; }
    .disptblcell2 { display: table-cell; -uu-display: table-cell; }
    .disptblcell3 { display: table-cell; -uu-display: table-cell; }

    .top { vertical-align: top }
    .middle { vertical-align: middle }
    .bottom { vertical-align: bottom }
    .left { text-align: left }
    .center { text-align: center }
    .right { text-align: right }
    ul { color: gray }
    &lt;/style&gt;

    &lt;table class="tbl"&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="cell1"&gt;navigation&lt;/td&gt;
        &lt;td class="cell2"&gt;content&lt;/td&gt;
        &lt;td class="cell3"&gt;sidebar&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;

    &lt;hr /&gt;

    &lt;div class="disptbl"&gt;
      &lt;div class="disptblcell1 top left"&gt;navigation&lt;span&gt;|span|&lt;/span&gt;&lt;p&gt;|p|&lt;/p&gt;&lt;/div&gt;
      &lt;div class="disptblcell2 middle center"&gt;content&lt;span&gt;|span|&lt;/span&gt;&lt;p&gt;|p|&lt;/p&gt;&lt;/div&gt;
      &lt;div class="disptblcell3 bottom right"&gt;sidebar&lt;span&gt;|span|&lt;/span&gt;&lt;p&gt;|p|&lt;/p&gt;&lt;/div&gt;
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
          &lt;li&gt;4&lt;/li&gt;
          &lt;li&gt;5&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;hr /&gt;

    &lt;ul class="disptbl" style="margin: 0; padding: 0"&gt;
      &lt;li class="disptblcell1 top left"&gt;navigation&lt;span&gt;|span|&lt;/span&gt;&lt;p&gt;|p|&lt;/p&gt;&lt;/li&gt;
      &lt;li class="disptblcell2 middle center"&gt;content&lt;span&gt;|span|&lt;/span&gt;&lt;p&gt;|p|&lt;/p&gt;&lt;/li&gt;
      &lt;li class="disptblcell3 bottom right"&gt;sidebar&lt;span&gt;|span|&lt;/span&gt;&lt;p&gt;|p|&lt;/p&gt;&lt;/li&gt;
    &lt;/ul&gt;
</pre>

</body></html>